<template>
  <div>
     <tw-chart
        :dataset="schoolDataLine.dataset"
        :chartOption="schoolDataLine.chartOption"
        :chartDataMaps="schoolDataLine.chartDataMaps"
        height="230px"
      ></tw-chart>
  </div>
</template>
<script>
import TwChart from '@/components/TwChart.vue'
export default {
  name: 'tw-linebar',
  components: {
    TwChart
  },
  props: {
    source: {
      type: [String],
      default: '0'
    },
    linetype: {
      type: String,
      default: 'line'
    },
    tjnf: {
      type: String,
      default: '2019'
    }
  },
  data () {
    return {
      curYear: 2019,
      schoolDataLine: {
        dataset: [],
        chartOption: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            top: '15%',
            left: '5%',
            right: '5%',
            bottom: '4%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              boundaryGap: true,
              axisLabel: {
                fontSize: 16
              }
            }],
          yAxis: [
            {
              type: 'value',
              name: '人数(万人)',
              nameTextStyle: {
                color: '#94aad4',
                fontSize: 16
              },
              axisLabel: {
                fontSize: 16
              }
            }
          ],
          series: []
        },
        chartDataMaps: []
      },
      renshu: [],
      renshu2017: [],
      renshu2018: [],
      renshu2019: [],
      renshu2020: [],
      renshu1: [],
      renshu12017: [],
      renshu12018: [],
      renshu12019: [],
      renshu12020: [],
      renshu2: [],
      renshu22017: [],
      renshu22018: [],
      renshu22019: [],
      renshu22020: [],
      shuidata: [],
      shuidata2017: [],
      shuidata2018: [],
      shuidata2019: [],
      shuidata2020: [],
      diandata: [],
      diandata2017: [],
      diandata2018: [],
      diandata2019: [],
      diandata2020: [],
      line: {},
      linebar: {}
    }
  },
  mounted () {
    // this.initData()
  },
  created () {
    this.initData()
  },
  watch: {
    '$store.state.curYear' (val) {
      let vm = this
      if (val === 2017) {
        vm.shuidata = vm.shuidata2017
        vm.diandata = vm.diandata2017
        vm.renshu = vm.renshu2017
        vm.renshu1 = vm.renshu12017
        vm.renshu2 = vm.renshu22017
      } else if (val === 2018) {
        vm.shuidata = vm.shuidata2018
        vm.diandata = vm.diandata2018
        vm.renshu = vm.renshu2018
        vm.renshu1 = vm.renshu12018
        vm.renshu2 = vm.renshu22018
      } else if (val === 2019) {
        vm.shuidata = vm.shuidata2019
        vm.diandata = vm.diandata2019
        vm.renshu = vm.renshu2019
        vm.renshu1 = vm.renshu12019
        vm.renshu2 = vm.renshu22019
      } else {
        vm.shuidata = vm.shuidata2020
        vm.diandata = vm.diandata2020
        vm.renshu = vm.renshu2020
        vm.renshu1 = vm.renshu12020
        vm.renshu2 = vm.renshu22020
      }
      vm.setOption()
      vm.curYear = val
    }
  },
  methods: {
    initData () {
      let vm = this
      vm.$axios.get('/static/weishidataview/jsondata/forecasegongshu.json', {
        baseURL: ''
      }).then((resp) => {
        // vm.renshu = resp.data.renshu[0]
        // vm.renshu2017 = resp.data.renshu[0]
        // vm.renshu2018 = resp.data.renshu[1]
        // vm.renshu2019 = resp.data.renshu[2]
        // vm.renshu2020 = resp.data.renshu[3]

        vm.line = resp.data.line
        vm.linebar = resp.data.linebar
        // console.log(vm.linebar)

        if (this.linetype === 'scatter' && this.source === '3') {
          this.app_xsyc_jmysyd('生活用电')
        } else if (this.linetype === 'scatter' && this.source === '4') {
          this.app_xsyc_jmysyd('生活用水')
        }
        if (this.linetype === 'line' && this.source === '1') {
          this.app_xsyc_csjhrk('出生人口数')
        } else if (this.linetype === 'line' && this.source === '2') {
          this.app_xsyc_csjhrk('登记结婚数')
        } else if (this.linetype === 'line' && this.source === '0') {
          this.app_jxszhjy_fwnlfx_xx()
        }
        if (this.linetype === 'linebar' && this.source === '0') {
          this.app_jxszhjy_fwnlfx_xs('小学')
        } else if (this.linetype === 'linebar' && this.source === '1') {
          this.app_jxszhjy_fwnlfx_xs('初中')
        } else if (this.linetype === 'linebar' && this.source === '2') {
          this.app_jxszhjy_fwnlfx_xs('高中')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    setOption () {
      let vm = this
      let index = parseInt(vm.source)
      if (vm.linetype === 'line') {
        vm.schoolDataLine.chartOption.yAxis[0].name = vm.line.yAxis[index]
        if (vm.source === '0') {
          vm.schoolDataLine.chartOption.yAxis[0].name = '学校数量'
        }
        let schoolTypeList = [1, 2, 3, 4, 5, 6]

        // 单线
        // vm.schoolDataLine.chartDataMaps = vm.line.chartDataMaps.map(item => {
        //   return {
        //     ...item,
        //     type: vm.linetype
        //   }
        // })
        // vm.schoolDataLine.chartDataMaps = schoolTypeList.map((item, index) => {
        //   return {
        //     dataKey: 'grade' + (index + 1),
        //     name: item,
        //     type: 'line'
        //   }
        // })
        let newChartDataMaps = []
        schoolTypeList.forEach(el => {
          if (el > 0 && el <= 2) {
            newChartDataMaps.push({
              dataKey: 'grade' + el,
              name: '小学',
              type: 'line'
            })
          } else if (el > 2 && el <= 4) {
            newChartDataMaps.push({
              dataKey: 'grade' + el,
              name: '初中',
              type: 'line'
            })
          } else if (el > 4 && el <= 6) {
            newChartDataMaps.push({
              dataKey: 'grade' + el,
              name: '普高',
              type: 'line'
            })
          }
        })
        vm.schoolDataLine.chartDataMaps = newChartDataMaps.map(item => {
          return {
            ...item,
            type: 'line',
            smooth: false,
            lineStyle: {
              type: item.dataKey === 'grade2' || item.dataKey === 'grade4' || item.dataKey === 'grade6'
                ? 'dot'
                : 'solid'
            }
          }
        })
      } else if (vm.linetype === 'scatter') {
        let toolTips = this.schoolDataLine.chartOption.tooltip
        vm.schoolDataLine.chartOption.yAxis[0].name = vm.line.yAxis[index]
        if (this.source === '4') {
          toolTips.formatter = (params) => {
            let res = ''
            res += params[0].name + '<br />' + params[0].marker + '生活用水: ' + params[0].value
            return res
          }
          vm.schoolDataLine.dataset = vm.shuidata
        } else if (this.source === '3') {
          toolTips.formatter = (params) => {
            let res = ''
            res += params[0].name + '<br />' + params[0].marker + '生活用电: ' + params[0].value
            return res
          }
          vm.schoolDataLine.dataset = vm.diandata
        }
        vm.schoolDataLine.chartDataMaps = vm.line.chartDataMaps.map(item => {
          return {
            ...item,
            type: vm.linetype
          }
        })
      } else if (vm.linetype === 'linebar') {
        if (vm.source === '0') {
          vm.schoolDataLine.dataset = vm.renshu
        } else if (vm.source === '1') {
          vm.schoolDataLine.dataset = vm.renshu1
        } else if (vm.source === '2') {
          vm.schoolDataLine.dataset = vm.renshu2
        }

        vm.schoolDataLine.chartOption.yAxis = [
          {
            type: 'value',
            // splitNumber: 3,
            name: '学生总数(人)',
            nameTextStyle: {
              color: '#94aad4',
              fontSize: 16
            },
            axisLabel: {
              fontSize: 16
            }
          }
        ]
        vm.schoolDataLine.chartOption.legend = {
          top: '2%',
          textStyle: {
            fontSize: 16
          },
          borderRadius: 5
        }
        vm.schoolDataLine.chartOption.tooltip = {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function (params) {
            let text = ''
            let text1 = ''
            if (params.length > 0) {
              params.forEach(item => {
                if (item.value && item.seriesName === '实际学生人数') {
                  text = item.marker + '实际学生人数：' + item.value
                } else if (item.value && item.seriesName === '系统预测学生人数') {
                  text1 = item.marker + '系统预测学生人数：' + item.value
                }
              })
            }
            return text + '<br>' + text1
          }
        }
        vm.schoolDataLine.chartDataMaps = vm.linebar.chartDataMaps.map(item => {
          return {
            ...item,
            type: 'line',
            smooth: true,
            lineStyle: {
              type: item.dataKey === 'grade3' || item.dataKey === 'grade4'
                ? 'dot'
                : 'solid'
            }
          }
        })
      }
    },
    // 用水用电
    app_xsyc_jmysyd (queryData) {
      let vm = this
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = { 'fieldName': 'tjlx', 'fieldValues': [queryData], 'operator': 'IN', 'prepender': 'AND' }
      quary.conditions.push(timeSectionValue)
      let dataset = []
      vm.$axios
        .post('tw-cloud-datatheme-server/themedata/app_xsyc_jmysyd', quary)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                dataset.push({
                  name: item.tbnf,
                  grade1: (item.sl / 10000)
                })
              })
            }

            if (dataset.length > 4) {
              if (queryData === '生活用水') {
                vm.shuidata2017 = dataset.slice(0, dataset.length - 3)
                vm.shuidata2018 = dataset.slice(0, dataset.length - 2)
                vm.shuidata2019 = dataset.slice(0, dataset.length - 1)
                vm.shuidata2020 = dataset
                vm.shuidata = dataset
              } else {
                vm.diandata2017 = dataset.slice(0, dataset.length - 3)
                vm.diandata2018 = dataset.slice(0, dataset.length - 2)
                vm.diandata2019 = dataset.slice(0, dataset.length - 1)
                vm.diandata2020 = dataset
                vm.diandata = dataset
              }
            } else {
              if (queryData === '生活用水') {
                vm.shuidata2017 = dataset
                vm.shuidata2018 = dataset
                vm.shuidata2019 = dataset
                vm.shuidata2020 = dataset
                vm.shuidata = dataset
              } else {
                vm.diandata2017 = dataset
                vm.diandata2018 = dataset
                vm.diandata2019 = dataset
                vm.diandata2020 = dataset
                vm.diandata = dataset
              }
            }
            vm.setOption()
          },
          (response) => {
            console.log('error')
          }
        )
    },
    // 服务能力分析_学校统计
    async app_jxszhjy_fwnlfx_xx () {
      let vm = this
      let quary = { 'conditions': [], 'fields': [] }

      let dataset = []
      await vm.$axios
        .post('tw-cloud-datatheme-server/themedata/app_jxszhjy_fwnlfx_xx', quary)
        .then(
          (response) => {
            let toolTips = vm.schoolDataLine.chartOption.tooltip
            let yAxis = vm.schoolDataLine.chartOption.yAxis
            yAxis[0].name = '学校数'
            toolTips.formatter = (params) => {
              let res = params[0].name + '<br />'
              // console.log(params)
              if (params[0].name < 2020) {
                res += params[0].marker + params[0].seriesName + '学校数量: ' + params[0].value + '所' + '<br />'
                res += params[2].marker + params[2].seriesName + '学校数量: ' + params[2].value + '所' + '<br />'
                res += params[4].marker + params[4].seriesName + '学校数量: ' + params[4].value + '所'
              } else if (params[0].name >= 2020) {
                res += params[1].marker + params[1].seriesName + '学校数量: ' + params[1].value + '所' + '<br />'
                res += params[3].marker + params[3].seriesName + '学校数量: ' + params[3].value + '所' + '<br />'
                res += params[5].marker + params[5].seriesName + '学校数量: ' + params[5].value + '所'
              }
              // res += params[0].name + '<br />' + params[0].marker + '学校数量: ' + params[0].value + '所'
              return res
            }
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              // response.data.pageInfo.list.forEach(item => {
              //   let curdata = dataset.filter(itm => itm.name === item.tjnf)
              //   if (curdata.length > 0) {
              //     curdata.grade1 = curdata.grade1 + item.yyxxsl
              //   } else {
              //     console.log(item)
              //     dataset.push({
              //       name: item.tjnf,
              //       grade1: item.yyxxsl
              //     })
              //   }
              // })

              vm.schoolDataLine.chartOption.legend = {
                top: '2%',
                textStyle: {
                  fontSize: 16
                },
                borderRadius: 5
              }
              let nfList = []
              response.data.pageInfo.list.forEach(item => {
                nfList.push(item.tjnf)
              })
              nfList = [...new Set(nfList)]
              nfList.forEach(el => {
                dataset.push({
                  name: el
                })
              })
              response.data.pageInfo.list.forEach(item => {
                dataset.forEach(el => {
                  if (el.name === item.tjnf && el.name < 2020) {
                    if (item.jyjd === '小学') {
                      el.grade1 = item.yyxxsl
                    } else if (item.jyjd === '初中') {
                      el.grade3 = item.yyxxsl
                    } else if (item.jyjd === '高中') {
                      el.grade5 = item.yyxxsl
                    }
                    if (el.name === '2019') {
                      if (item.jyjd === '小学') {
                        el.grade2 = item.yyxxsl
                      } else if (item.jyjd === '初中') {
                        el.grade4 = item.yyxxsl
                      } else if (item.jyjd === '高中') {
                        el.grade6 = item.yyxxsl
                      }
                    }
                  } else if (el.name === item.tjnf && el.name >= 2020) {
                    if (item.jyjd === '小学') {
                      el.grade2 = item.yyxxsl
                    } else if (item.jyjd === '初中') {
                      el.grade4 = item.yyxxsl
                    } else if (item.jyjd === '高中') {
                      el.grade6 = item.yyxxsl
                    }
                  }
                })
              })
            }
            vm.schoolDataLine.dataset = dataset
            vm.setOption()
          },
          (response) => {
            console.log('error')
          }
        )
    },
    // 出生结婚
    app_xsyc_csjhrk (queryData) {
      let vm = this
      // let queryData = {
      //   tjlx: '出生' //  或者结婚
      // }
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = { 'fieldName': 'tjlx', 'fieldValues': [queryData], 'operator': 'IN', 'prepender': 'AND' }
      quary.conditions.push(timeSectionValue)
      let dataset = []
      vm.$axios
        .post('tw-cloud-datatheme-server/themedata/app_xsyc_csjhrk', quary)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                dataset.push({
                  name: item.tbnf,
                  grade1: (item.rs / 10000)
                })
              })
            }
            vm.schoolDataLine.dataset = dataset
            vm.setOption()
          },
          (response) => {
            console.log('error')
          }
        )
    },
    // 服务能力分析_学生统计
    app_jxszhjy_fwnlfx_xs (queryData) {
      let vm = this
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = { 'fieldName': 'jyjd', 'fieldValues': [queryData], 'operator': 'IN', 'prepender': 'AND' }
      quary.conditions.push(timeSectionValue)
      let dataset = []
      vm.$axios
        .post('tw-cloud-datatheme-server/themedata/app_jxszhjy_fwnlfx_xs', quary)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              vm.tjnf = '2019'
              response.data.pageInfo.list.forEach(item => {
                if (item.tjnf < vm.tjnf) {
                  dataset.push({
                    name: item.tjnf,
                    grade1: item.xsrs
                  })
                } else if (item.tjnf === vm.tjnf) {
                  dataset.push({
                    name: item.tjnf,
                    grade1: item.xsrs,
                    grade3: item.xsrs
                  })
                } else if (item.tjnf > vm.tjnf) {
                  dataset.push({
                    name: item.tjnf,
                    grade3: item.xsrs
                  })
                }
              })
            }
            // vm.schoolDataLine.dataset = dataset
            if (dataset.length > 4) {
              if (queryData === '小学') {
                vm.renshu2017 = dataset.slice(0, dataset.length - 3)
                vm.renshu2018 = dataset.slice(0, dataset.length - 2)
                vm.renshu2019 = dataset.slice(0, dataset.length - 1)
                vm.renshu2020 = dataset
                vm.renshu = dataset
              } else if (queryData === '初中') {
                vm.renshu12017 = dataset.slice(0, dataset.length - 3)
                vm.renshu12018 = dataset.slice(0, dataset.length - 2)
                vm.renshu12019 = dataset.slice(0, dataset.length - 1)
                vm.renshu12020 = dataset
                vm.renshu1 = dataset
              } else if (queryData === '高中') {
                vm.renshu22017 = dataset.slice(0, dataset.length - 3)
                vm.renshu22018 = dataset.slice(0, dataset.length - 2)
                vm.renshu22019 = dataset.slice(0, dataset.length - 1)
                vm.renshu22020 = dataset
                vm.renshu2 = dataset
              }
            } else {
              if (queryData === '小学') {
                vm.renshu2017 = dataset
                vm.renshu2018 = dataset
                vm.renshu2019 = dataset
                vm.renshu2020 = dataset
                vm.renshu = dataset
              } else if (queryData === '初中') {
                vm.renshu12017 = dataset
                vm.renshu12018 = dataset
                vm.renshu12019 = dataset
                vm.renshu12020 = dataset
                vm.renshu1 = dataset
              } else if (queryData === '高中') {
                vm.renshu22017 = dataset
                vm.renshu22018 = dataset
                vm.renshu22019 = dataset
                vm.renshu22020 = dataset
                vm.renshu2 = dataset
              }
            }
            vm.setOption()
          },
          (response) => {
            console.log('error')
          }
        )
    },
    setLineOption () {
      let vm = this
      // let index = parseInt(vm.source)
      if (vm.linetype === 'linebar') {
        // vm.schoolDataLine.dataset = dataset[index]
        vm.schoolDataLine.chartOption.yAxis = [
          {
            type: 'value',
            // splitNumber: 3,
            name: '学生总数(人)',
            nameTextStyle: {
              color: '#94aad4',
              fontSize: 16
            },
            axisLabel: {
              fontSize: 16
            }
          }
        ]
        vm.schoolDataLine.chartOption.legend = {
          top: '2%',
          textStyle: {
            fontSize: 16
          },
          borderRadius: 5
        }
        vm.schoolDataLine.chartOption.tooltip = {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function (params) {
            let text = ''
            let text1 = ''
            if (params.length > 0) {
              params.forEach(item => {
                if (item.value && item.seriesName === '实际学生人数') {
                  text = item.marker + '实际学生人数：' + item.value
                } else if (item.value && item.seriesName === '系统预测学生人数') {
                  text1 = item.marker + '系统预测学生人数：' + item.value
                }
              })
            }
            return text + '<br>' + text1
          }
        }
        vm.schoolDataLine.chartDataMaps = vm.linebar.chartDataMaps.map(item => {
          return {
            ...item,
            type: 'line',
            smooth: true,
            lineStyle: {
              type: item.dataKey === 'grade3' || item.dataKey === 'grade4'
                ? 'dot'
                : 'solid'
            }
          }
        })
      }
    }
  }
}
</script>
